<template>
  <view class="purchaseShop custom-uni-view">
    <!-- 搜索框 -->
    <view class="shopSearch">
      <!-- div后面需要点击的link或者标签放到绝对定位的div里面，然后将这个div的z-index设置得大于前一个绝对定位的div即可 -->
      <view  class="searchIcon"  @click="b2bSearch">
        <image style="width: 28rpx; height: 28rpx;"  src="../../static/image/icon/searchIcon.png" mode=""></image>
      </view>
      <input class="uni-input-shop" confirm-type="search"  @input="onInput" @confirm='b2bSearch' cursor='3' placeholder-style="font-size:26rpx;line-height:60rpx;font-weight:400;color:#8A8A8A" placeholder="搜索你想要的商品"/>
    </view>
    
    <!-- 轮播图 -->
    <view class="carousel">
      <swiper class="carouselSwiper common-swiper-hollow" :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration">
        <swiper-item v-for="(item,index) in bannerList" :key = "index">
          <view class="swiper-item uni-bg-red" @click="carouselImg(item)">
            <image style="width: 100%; height: 100%;" :src="item.imageUrl" mode=""></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    
    <!-- 应用列表 -->
    <view class="toolServe">
      <view class="topNav">
        <view class="shopManage" v-for="(i,index) in toolManageList" :key ="index" @click="gotoCatgory(i)">
          <view  class="boxDiv">
            <image style="width: 79rpx;height: 79rpx;" :src="i.href" mode=""></image>
          </view>
          <view class="shoptxt">{{i.name}}</view>
        </view>
        <view class="shopManage" @click="allTypeClick(toolManageList[0])">
          <view  class="boxDiv">
            <image style="width: 79rpx;height: 79rpx;" :src="$store.state.imgBaseUrl + '/allClassify.png'" mode=""></image>
          </view>
          <view class="shoptxt">全部</view>
        </view>
      </view>
    </view>
    
    <!-- 行业选购 -->
    <view class="industryModule">
      <view class="industryBox">
        <view class="industryTxt">行业采购</view>
        <swiper class="common-swiper common-swiper-location" :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration">
          <swiper-item v-for="(i,index) in industryShopList" :key = "index">
            <view class="industryShopList">
              <view class="industryShopItem" v-for="(item,idx) in i.industryShopitems" :key="idx" @click="gotoDetail(item)">
                <view class="ShopItemImg">
                  <image style="width: 140rpx; height: 140rpx;" :src="item.imageUrl"></image>
                </view>
                <view class="ShopItemPrice">
                  <text>￥{{item.price}}</text>
                </view>
              </view>
              <!-- 第三页的最后一个图片 -->
              <view class="" v-if="index == industryShopList.length-1"> 
                <image style="width: 140rpx;height: 140rpx;" src="../../static/image/viewMore-140.png" mode="" @click="gotoAllIndustry('industry')"></image>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <!-- 大牌优选 -->
    <view class="calculateDistr">
      <view class="calculateTitle">
        <text class="embellish"></text>
        <text class="embellish"></text>
        <text> 大牌优选</text>
        <text class="embellish"></text>
        <text class="embellish"></text>
        <text class="calculatText" @click="gotoAllBrand">更多品牌</text>
      </view>
      <view class="">
      </view>
      <view class="calculateBox">
        <view class="calculateLift">
          <swiper class="calculateLift-swiper common-swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration">
            <swiper-item v-for="(i,index) in brandOneList" :key = "index">
              <view class="hotShop-item" v-for="(item,index) in i.brandOneItem" :key = "index" @click="gobrandList(item)">
                <div :style='"background-image: url("+item.avator+")"' class="bandOneItem"></div>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
    
    <!-- 本周热销 -->
    <view class="hotreCommendBox">
      <view class="hotreCommend" style="height: 690rpx;">
        <view class="hotTitle">本周热销榜</view>
        <swiper class="common-swiper" style="height: 85%;" :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration">
          <swiper-item v-for="(i,index) in weekhotShopList" :key = "index">
            <view class="hotShop-list">
              <view class="hotShop-item" v-for="(item,index) in i.weekhotShopItem" :key = "index" @click="gotoDetail(item)">
                <view class="hotShop-item-img">
                  <image style="width: 190rpx; height: 190rpx;" :src="item.imageUrl"></image>
                </view>
                <view class="hotShop-item-txt">{{item.name}}</view>
                <view class="hotShop-item-price">￥{{item.price}}</view>
              </view>
              <!-- 第三页的最后一个图片 -->
              <view class="lastImg" v-if="index == weekhotShopList.length-1">
                <image style="width: 190rpx;height: 190rpx;" src="../../static/image/viewMore-190.png" mode="" @click="gotoAllIndustry('hotsale')"></image>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    
    <!-- 热门推荐 -->
    <view class="hotreCommendBox">
      <view class="hotreCommend">
        <view class="purchaseTypeTop">
          <view class="hotTitle">采购类别</view>
        </view>
        <view class="" style="margin-right:40rpx;">
          <scroll-view scroll-x="true" style="margin: 20rpx 20rpx; height: 50rpx;">
            <view class="common-tab">
              <view class="common-tab-text" :class="{active:item.id == tabNum,text:item.id == tabNum}" style="white-space:nowrap;" v-for="(item,id) in tabList" :key ="id" @click="categoryShop(item)">{{item.name}}</view>
            </view>
          </scroll-view>
        </view>
        <view class="commodityOne" @click="commodityOneClick(shopForm.id)">
          <view class="commodityOne-l">
            <image style="width: 212rpx; height: 212rpx;" :src="shopForm.imageUrl" mode=""></image>
          </view>
          <view class="commodityOne-r">
            <view class="commodityOne-r-txt">{{shopForm.name}}</view>
            <view class="commodityOne-r-money">￥ {{shopForm.price}}<text class="lineation" v-if="!shopForm.hiddenMarketPrice">￥{{shopForm.retailPrice}}</text></view>
          </view>
        </view>
        <!-- 最后一个图片 -->
        <view class="lastImg" v-if="hotShopList.length < 2" @click="evenMore">
          <image style="width: 190rpx;height: 190rpx;" src="../../static/image/viewMore-190.png" mode=""></image>
        </view>
      </view>
      <swiper  v-if="hotShopList.length > 0" class="common-swiper" style="height: 600rpx;" :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration">
        <swiper-item v-for="(i,index) in hotShopList" :key = "index"  >
          <view class="hotShop-list">
            <view class="hotShop-item" v-for="(item,index) in i.hotShopItem" :key = "index" @click="gotoDetail(item)">
              <view class="hotShop-item-img">
                <image style="width: 190rpx; height: 190rpx;" :src="item.imageUrl"></image>
              </view>
              <view class="hotShop-item-txt">{{item.name}}</view>
              <view class="hotShop-item-price">￥{{item.price}}</view>
            </view>
            <!-- 最后一个图片 -->
            <view class="lastImg" v-if="index == hotShopList.length-1" @click="evenMore">
              <image style="width: 190rpx;height: 190rpx;" src="../../static/image/viewMore-190.png" mode=""></image>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view>
      <uni-fab
        :pattern="pattern"
        :content="content"
        :horizontal="horizontal"
        :direction="direction"
        @trigger="trigger"
      ></uni-fab>
    </view>
    <view class="buttonWire" style="clear: both;">
      <view class="brokenline"></view>
      <text class="buttonline">已经底线喽</text>
      <view class="brokenline"></view>
    </view>
  </view>
</template>

<script>
import { industry,findRecommend,hotSaleByWeek,brandFind,categoryFind,bannerFind,productSearch } from "../../service/purchaseShop/purchaseShop.service.js"
import uniFab from '../../components/uni-fab/uni-fab.vue';
// import { decideEnv, isIOS} from '@/unit/common.js'
export default {
  components: { uniFab },
  data() {
    return {
      indicatorDots: true,//指示点
      autoplay: false,//自动播放
      circular:false,//是否采用衔接滑动
      interval: 2000,
      duration: 500,
      tabNum:0,
      tabList: [
        {id:0,priceMin:1,priceMax:100,name:'1-100'},
        {id:1,priceMin:100,priceMax:300,name:'100-300'},
        {id:2,priceMin:300,priceMax:1000,name:'300-1000'},
        {id:3,priceMin:1000,priceMax:5000,name:'1000-5000'},
        {id:4,priceMin:5000,priceMax:'',name:'5000以上'},
      ],
      searchname:'', // 搜索商品名称
      shopForm: {},
      index: 0,
      brandOneList:[],
      brandTwoForm: {
        avator: '',
        brandDesc: '',
        fileId: '',
        id: '',
        name: ''
      },
      brandThreeForm: {
        avator: '',
        brandDesc: '',
        fileId: '',
        id: '',
        name: ''
      },
      toolManageList: [],
      industryShopList: [],
      hotShopList: [{hotShopItem: []},{hotShopItem: []},{hotShopItem: []}],
      weekhotShopList: [],
      pageInfo: {
        size:23,
        current:1
      },
      bannerList: [{imageUrl:''},{imageUrl:''},{imageUrl:''}],
      // x: 0,
      // y: 0,
      horizontal: 'right',
      direction: 'vertical',
      pattern: {
        color: '#FFFFFF',
        backgroundColor: 'rgba(0,0,0,0.5)',
        selectedColor: '#007AFF',
        buttonColor:"#434343"
      },
      content: [
        {
          iconPath: '../../static/image/suspen/goodsCar.png', // 图片路径
          // selectedIconPath: '',  // 选中后图片路径
          text: '购物车',
          active: false
        },
        {
          iconPath: '../../static/image/suspen/order.png', // 图片路径
          // selectedIconPath: '', // 选中后图片路径
          text: '订单',
          active: false
        },
        {
          iconPath: '../../static/image/suspen/workbench.png', // 图片路径
          // selectedIconPath: '', // 选中后图片路径
          text: '工作台',
          active: false
        },
      ],
      morePrice: {
        priceMax: 100,
        priceMin: 1
      }
    }
  },
  mounted() {
    this.industry();
    this.tabList && this.tabList.length > 0 && this.findRecommends(this.tabList[0]);
    this.hotSaleByWeeks();
    this.brandFinds();
    this.categoryFinds();
    this.bannerFinds();
  },
  methods: {
    industry () { // 行业采购
      this.pageInfo.size = 15;
      industry(this.pageInfo,(res => {
        if (res.status == 0) {
          this.sliceListFunc(res.data.records, this.industryShopList, 'industryShopitems', 0, 4);
        }
      }))
    },
    onInput (e) {
      setTimeout(() => { 
        this.searchname  =e.detail.value;
      }, 0)
    },
    b2bSearch () { // 商品搜索
      if (this.searchname === '') {
        uni.showToast({
          title: '请输入商品名称',
          icon: 'none'
        });
        return
      }
      uni.navigateTo({
        url: '/pages/purchaseShop/goodList?name=' + this.searchname + '&stype=search'
      });
    },
    bannerFinds () { //轮播
      bannerFind({id:1},res => {
        this.bannerList = res.data;
      })
    },
    categoryFinds () { // 类目
      categoryFind({},res => {
        // this.toolManageList = res.data || [];
        this.toolManageList = res.data && res.data.length > 0 ? res.data.slice(0,9) : [];//截取数组的前九条数据
      })
    },
    categoryShop (item) {//商品列表
      this.tabNum = item.id;
      this.findRecommends(item)
      this.morePrice.priceMax = item.priceMax;
      this.morePrice.priceMin = item.priceMin
    },
    brandFinds () { // 大牌优选
      this.pageInfo.size = 18;
      brandFind(this.pageInfo,(res => {
        if (res.status == 0) {
          this.sliceListFunc(res.data.records, this.brandOneList, 'brandOneItem', 0);
        }
      }))
    },
    //  轮播公共方法 
    // 参数一：接收到的list  参数二：多少屏滑块 参数三：当前屏 参数四：当前屏-key值  参数五：每屏多少数据-item--默认6
    sliceListFunc (from, to, item, start, num) {
      num = num ? num : 6;
      if (from && from.length > 0) {
        let ping = Math.ceil(from.length / num);
        for (let i=start; i < ping; i++) {
          to.push({
            [item]: from.slice((i * num), (i + 1) * num)
          })
        }
      }
    },
    findRecommends (item) { //采购类别
      let params = this.pageInfo;
      params.size = 17;
      params.priceMin = item.priceMin;
      params.priceMax = item.priceMax;
      findRecommend(this.pageInfo,(res => {
        if (res.status == 0) {
          if(this.pageInfo.current == 1) {
            this.shopForm = res.data.records[0];
            this.hotShopList = [];
            this.sliceListFunc(res.data.records, this.hotShopList, 'hotShopItem', 1);
          }
        }
      }))
    },
    hotSaleByWeeks () {
      hotSaleByWeek (this.pageInfo,(res => { //本周热销
        if (res.status == 0) {
          if (this.pageInfo.current == 1) {
            this.sliceListFunc(res.data.records, this.weekhotShopList, 'weekhotShopItem', 0);
          }
        }
      }))
    },
    gotoCatgory (item) {
      uni.navigateTo({
        url: '/pages/purchaseShop/goodList?title=' + item.name + '&id=' + item.id
      })
    },
    allTypeClick (item) {
      uni.navigateTo({
        url: '/pages/purchaseShop/goodsCategory?id=' + item.id
      })
    },
    gotoAllBrand () {
      uni.navigateTo({
        url: '/pages/brand/brand'
      })
    },
    gobrandList (item) {
      uni.navigateTo({
        url: `/pages/brand/brandList?branId=${item.id}&brandName=${item.name}&pic=${item.avator}`
      })
    },
    gotoAllIndustry (type) {
      uni.navigateTo({
        url: '/pages/industry/industryGoods?type=' + type
      })
    },
    gotoDetail (item) {
      uni.navigateTo({
        url: '/pages/purchaseShop/goodsDetail?id=' + item.id
      })
      // //#ifdef H5
      // if (isIOS() && decideEnv() && decideEnv() == 'wx') {
      //   location.assign(location.origin + '/pages/purchaseShop/goodsDetail?id=' + item.id);
      // } else {
      //   uni.navigateTo({
      //     url: '/pages/purchaseShop/goodsDetail?id=' + item.id
      //   })
      // }
      // //#endif
    },
    // 点击轮播图
    carouselImg (item) {
      if (item.url) {
        window.location.href = item.url
      }
    },
    commodityOneClick (id) {//采购类别第一个商品详情跳转
      uni.navigateTo({
        url: '/pages/purchaseShop/goodsDetail?id=' + id
      })
    },
    // onChange (e) {
    //   this.x = e.detail.x;
    //   this.y = e.detail.y;
    // },
    // goShopcart () { // 进入购物车页面
    //   uni.navigateTo({
    //     url: '/pages/purchaseShop/goodsCar'
    //   })
    // }
    trigger(e) {
      if (e.index == 0) { // 购物车
        uni.navigateTo({
          url: '/pages/purchaseShop/goodsCar'
        })
      }
      if (e.index == 1) { // 订单
        uni.navigateTo({
          url: '/pages/purchaseShop/orderList?type=-1'
        })
      }
      if (e.index == 2) { // 工作台
        uni.switchTab({
          url: '/pages/workbench/index'
        })
      }
    },
    //采购类别--查看更多
    evenMore () {
      uni.navigateTo({
        url: '/pages/purchaseShop/priceArea?priceMax=' + this.morePrice.priceMax + '&priceMin=' + this.morePrice.priceMin
      });
    }
  }
}
</script>
<style lang="scss" scoped>
  .purchaseShop {
    background-color: #FDFDFD;
    // 搜索框
    .shopSearch {
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0;
      position: relative;
      .uni-input-shop {
        width: 100%;
        height:60rpx;
        margin: 0 72rpx;
        text-align: center;
        border-radius:10rpx;
        background-color: #F0F0F0;
      }
      .searchIcon {
        width: 14px;
        z-index: 999;
        position: absolute;
        top: 34rpx;
        left: 96rpx;
      }
    }
    
    // 轮播图
    .carousel {
      .carouselSwiper {
        height: 280rpx;
      }
      .swiper-item {
        height: 100%;
      }
    }
    
    .boxDiv{//示例框
      width: 79rpx;
      height: 79rpx;
    }
    
    // 应用列表
    .toolServe {
      margin-top: 40rpx;
      padding: 0 34rpx;
      .topNavBox {
        padding-top: 16rpx;
        box-shadow: 4rpx -2rpx 10rpx #ccc;
        border-top-left-radius: 15rpx;
        border-top-right-radius: 15rpx;
      }
      .topNav {
        display: flex;
        flex-wrap: wrap;
        justify-content:start;
        text-align: justify;
        margin: 30rpx 0;
        .shopManage {
          flex: 0 0 20%;
          text-align: -webkit-center;
          .shoptxt {
            font-size: 24rpx;
            text-align: center;
            line-height: 79rpx;
          }
        }
      }
    }
    
    // 行业选购
    .industryModule {
      padding: 0 34rpx;
      .industryBox {
        // height: 269rpx;
        background-color: #FFFFFF;
        box-shadow:0rpx 0rpx 13rpx 0rpx rgba(237,237,237,0.52);
        border-radius:10rpx;
        padding: 30rpx 20rpx;
        .industryTxt {
          line-height: 32rpx;
          font-size: 32rpx;
          color: #434343;
        }
        .industryShopList {
          display: flex;
          justify-content: space-between;
          margin-top: 50rpx;
          .industryShopItem {
            width: 25%;
            .ShopItemImg {
              text-align: center;
            }
            .ShopItemPrice {
              text-align: center;
              line-height:70rpx;
              font-size: 26rpx;
            }
          }
					uni-swiper .uni-swiper-dots-horizontal {
						bottom: 2px;
					}
        }
      }
    }
    // 划算专区
    .calculateDistr {
      height:420rpx;
      margin-top: 32rpx;
      background:rgba(248,243,237,1);
      .calculateTitle {
        text-align: center;
        line-height: 82rpx;
        font-size:32rpx;
        font-weight:500;
        color:rgba(67,67,67,1);
        .embellish {
          display: inline-block;
          width:14rpx;
          height:7rpx;
          margin:  0 8rpx;
          background:rgba(237,218,212,1);
          border-radius:3rpx;
          transform-origin:0 0;
          transform:rotate(-45deg);
        }
				.calculatText {
					font-size:24rpx;
					font-weight:500;
					position: absolute;
					color:rgba(102,102,102,1);
					float: right;
					right: 32rpx;
				}
      }
      .calculateBox {
        margin: 0 31rpx 31rpx 31rpx;
        .calculateLift {
					padding-top: 33rpx;
					flex: 1;
					flex-wrap: wrap;
					text-align: justify;
					text-align: center;
					.calculateLift-swiper {
						height: 300rpx;
					}
					.hotShop-item {
						flex: 0,0,20%;
						text-align: center;
						display: inline-block;
						background: rgba(255,255,255,1);
						border-radius: 10px;
						padding: 10rpx;
						margin: 4rpx 6rpx;
					}
					.bandOneItem {
						 width: 180rpx;
						 height: 90rpx;
						 background-position: center;
						 background-size: auto 100%;
						 background-repeat: no-repeat;
					}
        }
      }
    }
  
    // 热门推荐
    .displayInline {
      display: inline-block;
    }
    .hotreCommendBox {
      margin: 32rpx 32rpx 0 32rpx;
      // height:676rpx;
      background:rgba(255,255,255,1);
      box-shadow:0rpx 0rpx 13rpx 0rpx rgba(237,237,237,0.52);
      border-radius:10rpx;
      .hotreCommend  {
        .purchaseTypeTop {
          display: flex;
          justify-content:space-between;
          margin:0 20rpx;
          .uni-list-cell {
            width:164rpx;
            height:50rpx;
            background:rgba(240,240,240,1);
            border-radius:25rpx;
            margin-top: 20rpx;
            .uni-list-cell-db {
              line-height: 55rpx;
              margin-left: 20rpx;
              font-size:24rpx;
            }
          }
        }
        .commodityOne {
          margin:22rpx 20rpx;
					.commodityOne-l {
						display: inline-block;
						vertical-align: middle;
					}
					.commodityOne-r {
						display: inline-block;
						vertical-align: middle;
					}
          .commodityOne-r-txt {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 150rpx;
            font-size:28rpx;
            line-height: 56rpx;
            color:rgba(67,67,67,1);
            font-weight: 700;
            margin-left: 43rpx;
          },
          .commodityOne-r-money {
            margin-left: 43rpx;
            font-size:36rpx;
            color:rgba(255,116,115,1);
            margin-top: 20rpx;
            .lineation {
              font-size:26rpx;
              font-weight:400;
              color:rgba(153,153,153,1);
              text-decoration:line-through
            }
          }
        }
        .hotTitle {
          font-size:32rpx;
          font-weight:500;
          text-align: center;
          line-height:106rpx ;
          color:rgba(67,67,67,1);
        }
      }
      .hotShop-list {
        padding: 0 29rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .hotShop-item {
        }
        .hotShop-item-txt {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 150rpx;
          font-size:20rpx;
          text-align: center;
          font-weight:400;
          color:#999999;
        }
        .hotShop-item-price {
          font-size:26rpx;
          text-align: center;
          margin-bottom: 15rpx;
          color:#4A59E6;
        }
      }
      .lastImg {
        height: 250rpx;
        margin-top: 40rpx;
      }
    }
	
    .buttonWire {
      padding: 36rpx 68rpx;
      text-align: center;
      .brokenline {
        width:80px;
        height:1px;
        display: inline-block;
        background:#E1E1E1;
        margin-top: 10rpx;
      }
      .buttonline {
        font-size:12px;
        margin: 0 20rpx;
        color:rgba(67,67,67,1);
      }
    }
  }
</style>